<template>
    <div class="orderPage">
        <div class="order-box">
            <img :src="$axios.defaults.baseURL+content.photo" alt="" class="course" >
            <h3 class="title">{{content.title}}</h3>
            <p class="content">{{content.introduction}}</p>
            <p class="price"><span>价格:</span><span class="number">￥{{content.presentPrice}}</span></p>
            <div class="style">
                <span class="text">选择支付</span>
                <el-radio-group v-model="radio">
                    <el-radio :label="1"><i class="iconfont iconzhifubaozhifu"></i></el-radio>
                    <el-radio :label="2"><i class="iconfont iconweixinzhifu"></i></el-radio>
                </el-radio-group>
            </div>
            <p class="price"><span>支付价格:</span><span class="number">￥{{content.presentPrice}}</span></p>
            <el-button  class="pay-button" @click="goPay" v-show="!isPay">确定支付</el-button>
            <el-button  class="pay-button" :loading="true" v-show="isPay">支付中...</el-button>
            <div style="clear:both"></div>
        </div>
        <el-dialog title="" :visible.sync="dialogTableVisible" class="tan-dialog" :modal-append-to-body="false" :close-on-click-modal="false">
          <img :src="$axios.defaults.baseURL+imgUrl" alt="">
          <p class="p-sao">微信支付,<span>扫一扫轻松付款</span></p>
        </el-dialog>
        <el-dialog title="" :visible.sync="dialogTableVisible1" class="tan-dialog" :modal-append-to-body="false" :close-on-click-modal="false">
          <iframe :src="webUrl" frameborder="0" class="main-iframe"></iframe>
        </el-dialog>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import'@/assets/css/order/iconfont.css'
import { Notification } from 'element-ui';
export default {
    scrollToTop: true,
    components: {
        
    },
    data(){
        return{
            radio:"",
            audio:{},
            content:{},
            loading:false,
            dialogTableVisible:false,
            dialogTableVisible1:false,
            imgUrl:'',
            isPay:false,
            webUrl:'',
            isCourse:false,
        }
    },
    created(){
        this.getData();
    },
    computed: {
        // swiper() {
        //   return this.$refs.mySwiper.swiper;
        // }
    },
    mounted(){
        
    },
    beforeDestroy(){
        
    },
    head() {
        return {
          title: '支付订单',
          
        }
    },
    methods:{
        pageChange(){

        },
        goPay(){
            if(!Cookies.get("token")){
                this.$router.push("/login");
                return;
            }
            if(this.radio==""){
                Notification.warning({
                    title:'提示',
                    message:"请选择支付方式"
                });
                return;
            }
            var that = this;
            let obj = {};
            let url="";
            that.isPay = true;
            if(this.content.courseType=="1"){
                url = "/f/addOrder?buyId="+this.content.privateId+"&buyType="+this.content.courseType+"&orderPrice="+this.content.presentPrice+"&payChannel="+this.radio+"&payPrice="+this.content.presentPrice
            }
            else{
                url = "/f/addOrder?buyId="+this.content.privateId+"&buyType="+this.content.courseType+"&orderPrice="+this.content.presentPrice+"&payChannel="+this.radio+"&payPrice="+this.content.presentPrice+"&msCard="+Cookies.get("m-no")+"&msMobile="+Cookies.get("m-mobile")+"&msName="+Cookies.get("m-name")+"&msSex="+Cookies.get("m-sex")
            }
              this.$axios.$post(url)
              .then(function (response) {

                if(that.radio==2){
                   that.$alert('付款成功后10分钟后刷新购买状态,如果未刷新请退出重新登陆', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        setTimeout(()=>{
                            that.imgUrl = response.data.codeUrl;
                            that.dialogTableVisible = true;
                        },500)
                      }
                    }) 
                }
                else{
                    that.$alert('付款成功后10分钟后刷新购买状态,如果未刷新请退出重新登陆', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        setTimeout(()=>{
                            that.webUrl = response.data.codeUrl;
                            that.dialogTableVisible1 = true;
                            //window.open(response.data.json)
                        },500)
                      }
                    })
                }
                that.isPay = false;
                let obj = {
                    no:response.data.educationOrder.orderNo,
                    id:that.$route.params.id
                }
                that.$emit("getStatus",obj);
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
        },
        select(index){
            this.menuList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "active"
                }
                else{
                    item.addClass = ""
                }
            })
        },
        handleSelect1(){

        },
        handleSelect3(){

        },
        pre(){
            console.log(this.swiper)
            this.$refs.mySwiper.swiper.slidePrev();
        },
        play(){
            this.audio.pause();
            this.audio.src = this.musicUrl;
            this.audio.play();
        },
        next(){
            this.$refs.mySwiper.swiper.slideNext();
        },
        change(index){
            this.musicUrl = this.imgList[index].audio;
        },
        getData(){
          var that = this;
          this.loading = true;
          this.$axios.$post("/f/course?id="+this.$route.params.id)
          .then(function (response) {
            let data = Object.assign(response.data.course,response.data.course)
            that.content = data;

            
            

            that.loading = false;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        }
    }
}
</script>

<style lang="less">
.tan-dialog{
    .el-dialog{
      width:430px;
      height:430px;
      .el-dialog__body{
        text-align:center;
        .main-iframe{
            width:100%;
            min-height:350px;
        }
        img{
          width:186px;
          height:186px;
          margin:0 auto;
          margin-top:40px;

        }
        .p-sao{
            margin:0 auto;
          margin-top:40px;
          font-size:18px;
          text-align:center;
          span{
            font-style: oblique;
          }
        }
      }
    }
  }
    .orderPage{
        width:100%;
        background: #f4f4f4;
        padding-bottom:100px;
        .order-box{
            margin:0 auto;
            width:850px;
            background:#fff;
            padding:40px;
            box-sizing:border-box;
            margin-top:60px;
            border-radius:10px;
            .course{
                width:290px;
                height:200px;
                float:left;
                display:block;
                margin-right:20px;
                margin-bottom:10px;
            }
            .title{
                width:calc(100% - 310px);
                float:left;
                height:60px;
                margin-top:10px;
                margin-bottom:5px;
                line-height:30px;
                font-size:22px;
                color:#444444;
            }
            .content{
                width:calc(100% - 310px);
                float:left;
                font-size:14px;
                color:#444444;
                height:125px;
                line-height:25px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                overflow: hidden;
            }
            .style{
                width:100%;
                float:left;
                margin-top:15px; 
                height:38px;     
                .text{
                    font-size:16px;
                    color:#444444;
                    line-height:38px;
                    margin-right:10px;
                    display: block;
                    float: left;
                }
                .el-radio-group{
                    display:flex;
                    .el-radio{
                        line-height:36px;
                        .el-radio__input{
                          position: relative;
                          top: -5px;
                        }
                        .iconfont{
                          font-size:32px;
                        }
                        .iconzhifubaozhifu{
                          color:#25abee;
                        }
                        .iconweixinzhifu{
                          color:#00ac1c;
                          font-size:36px;
                        }
                    }
                }
            }
            .pay-button{
                background:#4e8cfb;
                border-color:#4e8cfb;
                color:#ffffff;
                margin-top:20px;
                float:right;
            }
            .price{
                width:100%;
                height:35px;
                line-height:35px;
                font-size:16px;
                color:#444444;
                float:left;
                margin-top:10px;
                .number{
                  color:#ff5924;
                  font-size:26px;
                }
                span{
                    display:block;
                    line-height:35px;
                    float:left;
                }
            }
        }
    }
</style>
